<template>
  <div class="com-container">
    <div class="title">
      <select @change="handleSelect(item.key)" :style="titleStyle">
        <option
          v-for="item in selectTypeArr"
          :key="item.key"
          @change="handleSelect(item.key)"
        >
          {{ item.text }}
        </option>
      </select>
    </div>
    <div class="com-charts" ref="trend_ref"></div>
  </div>
</template>

<script>
import "../../public/static/theme/chalk";
export default {
  data() {
    return {
      echarts: null,
      allData: [],
      choiceType: "map", //显示数据的类型
      titleFontSizeStyle: 0,
    };
  },
  methods: {
    //初始化echarts示例
    initEcharts() {
      this.echarts = this.$echarts.init(this.$refs.trend_ref, "chalk");
      const initOption = {
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
        },
        grid: {
          left: "3%",
          top: "35%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: 20,
          top: "15%",
          icon: "circle",
        },
      };
      this.echarts.setOption(initOption);
    },
    //获取服务器数据
    async getData() {
      const { data: res } = await this.$http.get("/trend");
      // console.log(res);
      this.allData = res;
      this.upDateEchart();
    },
    //数据处理
    upDateEchart() {
      //1.月份  类目轴 x轴
      const timeArr = this.allData.common.month;
      //2.数据  y数据
      const valueArr = this.allData[this.choiceType].data;
      const seriesArr = []; //填充的颜色
      const colorArr1 = [
        "rgba(11,168,44,0.5)",
        "rgba(44,110,255,0.5)",
        "rgba(22,242,217,0.5)",
        "rgba(254,33,30,0.5)",
        "rgba(250,165,0,0.5)",
      ];
      const colorArr2 = [
        "rgba(11,168,44,0)",
        "rgba(44,110,255,0)",
        "rgba(22,242,217,0)",
        "rgba(254,33,30,0)",
        "rgba(250,165,0,0)",
      ];
      valueArr.forEach((item, index) => {
        seriesArr.push({
          data: item.data,
          type: "line",
          stack: this.choiceType,
          name: item.name,
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: colorArr1[index], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colorArr2[index], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        });
      });
      //图例的数据
      const legendArr = [];
      valueArr.forEach((item) => {
        legendArr.push(item.name);
      });
      // console.log(legendArr);
      // console.log(seriesArr);
      const dataOpton = {
        xAxis: {
          data: timeArr,
        },
        series: seriesArr,
        legend: {
          data: legendArr,
        },
      };
      this.echarts.setOption(dataOpton);
    },
    //对选择的类型进行处理
    handleSelect(select) {
      this.choiceType = select;
      this.upDateEchart();
    },
    //屏幕适配
    screenAdapte() {
      // const titleFontSzie = (this.$refs.trend_ref.offsetWidth / 100) * 0.6;
      // this.titleFontSizeStyle = titleFontSzie;
      const adapteOption = {
        legend: {
          itemWidth: this.titleStyle,
          itemHeight: this.titleStyle,
          itemGap: this.titleStyle,
          textStyle: {
            fontSzie: this.titleStyle * 2,
          },
        },
      };
      // this.echarts.setOption(adapteOption);
      this.echarts.resize();
    },
  },
  computed: {
    selectTypeArr() {
      return this.allData.type;
    },
    titleStyle() {
      return {
        fontSzie: this.titleFontSizeStyle + "px",
      };
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.initEcharts();
    window.addEventListener("resize", this.screenAdapte);
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapte);
  },
};
</script>

<style lang="less" scoped>
.com-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  .title {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 10;
    color: white;
    background-color: #222733;
    select {
      background-color: #222733;
      color: white;
      border: 0;
      outline: none;
      font-size: 20px;
    }
  }

  .com-charts {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}
</style>